import React, { Component } from 'react'
import '../../../less/index.less'
import { withRouter } from 'react-router-dom'
import { Card, Col, Input, Modal, Radio, Tag } from 'antd'
import tagColor from '../../../constant/tag-color'
import { FormattedMessage } from 'react-intl'

const RadioGroup = Radio.Group
class TagBox extends Component {
  tagColorList () {
    return tagColor.map((item, index) =>
      <Col span={8} key={index}>
        <Radio className='radio-style' value={item.value}>
          <Tag color={item.value === 'default' ? '' : item.value}><FormattedMessage id={item.name} /></Tag>
        </Radio>
      </Col>)
  }

  render () {
    const {modalVisible, isEdit, tagName, tagColor} = this.props
    const options = this.tagColorList()
    return (
      isEdit
        ? <Modal
          title={<FormattedMessage id='修改Tag' />}
          centered
          width={400}
          visible={modalVisible}
          onOk={() => this.props.handleEditTag()}
          okText={<FormattedMessage id='确定' />}
          cancelText={<FormattedMessage id='取消' />}
          okButtonProps={{disabled: !tagName}}
          onCancel={() => this.props.setModalVisible(false)}>
          <Card bordered={false}>
            <FormattedMessage id='名称' />：
            <Input
              placeholder='input content'
              value={tagName}
              onChange={(e) => this.props.setTagName(e.target.value)} /><br /><br />
            <FormattedMessage id='颜色' />：
            <RadioGroup name='tagColor'
              value={tagColor}
              onChange={(e) => this.props.setTagColor(e.target.value)}>
              {options}
            </RadioGroup>
          </Card>
        </Modal>
        : <Modal
          title={<FormattedMessage id='创建Tag' />}
          centered
          width={400}
          visible={modalVisible}
          onOk={() => this.props.handleAddTag()}
          okText={<FormattedMessage id='确定' />}
          cancelText={<FormattedMessage id='取消' />}
          okButtonProps={{disabled: !tagName}}
          onCancel={() => this.props.setModalVisible(false)}>
          <Card bordered={false}>
            <FormattedMessage id='名称' />：
            <Input
              placeholder='input content'
              value={tagName}
              onChange={(e) => this.props.setTagName(e.target.value)} /><br /><br />
            <FormattedMessage id='颜色' />：
            <RadioGroup name='tagColor'
              value={tagColor}
              onChange={(e) => this.props.setTagColor(e.target.value)}>
              {options}
            </RadioGroup>
          </Card>
        </Modal>
    )
  }
}

export default withRouter(TagBox)
